<script setup lang="ts">
import ECharts from "@/components/ECharts.vue";
import { VueDraggable } from "vue-draggable-plus";

import { useMessage } from "naive-ui";
import { upload_excel } from "@/service";
const list1 = ref([
  {
    name: "Values2",
    id: "1",
    value: [
      8.766301394, 2.304481878, 2.459030003, 6.938793416, 2.65375319,
      8.887242371, 4.172762038, 3.505090377,
    ],
  },
  {
    name: "Values3",
    id: "2",
    value: [
      9.619363785, 2.921475268, 2.408287799, 1.002939423, 0.164296296,
      9.295293168, 6.699165466, 7.85152912,
    ],
  },
  {
    name: "Values4",
    id: "3",
    value: [
      0.498692325, 3.132829394, 0.207185181, 2.343239965, 0.784837012,
      0.610482845, 2.13742165, 0.613604219,
    ],
  },
  {
    name: "Counts",
    id: "4",
    value: [33, 35, 10, 22, 19, 28, 14, 17],
  },
]);
const list2 = ref([]);

let option = reactive({ list: [] });

function onUpdate() {
  console.log("update");
}
function onAdd() {
  console.log("add");
}
function remove() {
  console.log("remove::::", option);
}

async function analysisClick() {
  let dataList = JSON.parse(JSON.stringify(list2.value));
  let _datalist = [];

  for (let i = 0; i < dataList.length; i++) {
    let itemList = dataList[i].value;
    let categoryArr = [];
    for (let i = 1; i <= itemList.length; i++) {
      categoryArr.push(i);
    }

    _datalist = [
      ..._datalist,
      {
        legend: {
          data: [dataList[i].name],
          orient: "vertical",
          right: 10,
          top: 10,
        },
        xAxis: {
          type: "category",
          data: categoryArr,
          splitLine: { show: false },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            align: "center", // 设置X轴刻度标签居中
          },
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
        },
        series: [
          {
            data: itemList,
            type: "bar",
            name: dataList[i].name,
            barMaxWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: "#178AEC", // 设置柱状图的颜色
            },
          },
        ],
      },
    ];
  }
  option.list = _datalist;
  console.log(option.list);
  console.log(option.list.length);
}

let showModal = ref(false);
async function sampleClick() {
  showModal.value = true;
}

const message = useMessage();
const customRequest = async ({
  file,
  data,
  headers,
  withCredentials,
  action,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  formData.append("file", file.file);
  let res = await upload_excel(formData);
  let _list = [];
  for (let key in res.data) {
    _list = [
      ..._list,
      {
        name: key,
        id: key,
        value: res.data[key],
      },
    ];
  }
  list2.value = [];
  list1.value = _list;
  console.log(list1, "###");
  // lyla
  //   .post(action as string, {
  //     withCredentials,
  //     headers: headers as Record<string, string>,
  //     body: formData,
  //     onUploadProgress: ({ percent }) => {
  //       onProgress({ percent: Math.ceil(percent) });
  //     },
  //   })
  //   .then(({ json }) => {
  //     message.success(JSON.stringify(json));
  //     onFinish();
  //   })
  //   .catch((error) => {
  //     message.success(error.message);
  //     onError();
  //   });
};
</script>
 
 
<template>
  <n-card title="分类汇总">
    <div style="display: flex; width: 600px">
      <div style="margin-right: 20px">
        <n-upload
          action="upload_excel"
          :custom-request="customRequest"
          :show-file-list="false"
          class="cont-btn"
        >
          <n-button>上传文件</n-button>
        </n-upload>
        <!-- <n-button type="primary" class="cont-btn" @click="sampleClick"
          >选择样本</n-button
        > -->
        <VueDraggable
          class="flex flex-col gap-2 p-4 w-300px h-300px m-auto rounded overflow-auto drag-module-bg"
          v-model="list1"
          animation="150"
          ghostClass="ghost"
          group="people"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div
            v-for="item in list1"
            :key="item.id"
            class="cursor-move rounded p-1"
          >
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
      <div>
        <n-button type="primary" class="cont-btn" @click="analysisClick"
          >开始分析</n-button
        >
        <VueDraggable
          class="flex flex-col gap-2 p-4 w-300px h-300px m-auto rounded overflow-auto drag-module-bg"
          v-model="list2"
          animation="150"
          group="people"
          ghostClass="ghost"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div
            v-for="item in list2"
            :key="item.id"
            class="cursor-move rounded p-1"
          >
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
    </div>
    <ECharts
      :echarts-option="optionitem"
      v-for="(optionitem, key) in option.list"
      :key="key"
    />
    <!-- <n-modal
      v-model:show="showModal"
      transform-origin="center"
      preset="dialog"
      :style="{ width: '600px' }"
      title="卡片预设"
      content="你确认?"
      positive-text="确认"
      negative-text="算了"
      @positive-click="submitCallback"
      @negative-click="cancelCallback"
    >
      <n-card
        title="模态框"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-upload
          action="upload_excel"
          :custom-request="customRequest"
        >
          <n-button>上传文件</n-button>
        </n-upload>
      </n-card>
    </n-modal> -->
  </n-card>
</template>

<style scoped>
</style>
